<!--
 * @Author: jinjing
 * @Date: 2024-11-23
 * @Description: 基金趋势。
 -->
<template>
  <div class="content">
    <div class="search-content">
      <el-form :model="form" label-width="100px" :inline="true" class="search-form">
        <el-form-item label="基金">
          <el-select 
            v-model="form.fundCode"
            placeholder="请选择基金代码"
            >
            <el-option 
              v-for="item in fundCodeList" 
              :key="item.ticker"
              :label="item.name + `(${item.ticker})`"
              :value="item.ticker"
              ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker 
            v-model="form.dateRange" 
            range-separator="至"
            start-placeholder="请选择开始时间"
            end-placeholder="请选择结束时间"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            >
          </el-date-picker>
        </el-form-item>
        <el-button type="primary" @click="handleClick">绘制</el-button>
      </el-form>
    </div>
    <div class="chart-content">
      <div class="chart">
        <chart v-show="isShow"
          :options="options"
          style="width: 100%; height: 500px"
          @click="click"
          @mousedown="mousedown"
          @mousemove="mousemove"
          @mouseover="mouseover"
          @mouseout="mouseout"
          @globalout="globalout"
          @contextmenu="contextmenu"
          @chart="chartLine"
          />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getFundData, getNavData } from '../duckdb';
import { ElMessage } from 'element-plus'
import chart from '@/components/Chart.vue';
import moment from 'moment'

const form = ref({
 fundCode: '',
 dateRange: ''
})
const fundCodeList = ref([]) 
const getListData = async () => {
  fundCodeList.value = await getFundData("select ticker,name from fund_desc")
  return fundCodeList
}

await getListData()

const data = ref([])
const options = ref({})



const handleClick = async () => {
  if (form.value.fundCode === '' || form.value.dateRange === '') {
    ElMessage({
      message: '请选择基金代码与起止时间',
      type: 'warning',
    })
    return
  }
  data.value = []
  console.log(form.value)
  let query = `SELECT dt AS date, nav AS value FROM fund_nav WHERE ticker = '${form.value.fundCode}' AND dt BETWEEN '${form.value.dateRange[0]}' AND '${form.value.dateRange[1]}' ORDER BY dt;`
  console.log(query)
  let ans = await getNavData(query)
  for (let row of ans) {
    let date = new Date(row['date'])
    row['date'] = moment(date).format('YYYY-MM-DD')
    data.value.push(row)
  }
  console.log("table: ", data)
  // await initChartData()
  options.value = {
    title: {
      text: form.value.fundCode + '基金净值走势图',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    xAxis: {
      type: 'category',
      data: data.value.map(v => v.date),
      name: '日期'
    },
    yAxis: {
      type: 'value',
      name: '单位净值',
    },
    series: [
      {
        data: data.value.map(v => v.value),
        type: 'line',
      },
    ],
  }
}

const isShow = ref(true)
const chartRef = ref(null)
const chartLine = (dom) => {
  chartRef.value = dom
}
const initChartData = () => {
  
}

const click = (e) => {
  console.log('click-----', e)
}
const mousedown = (e) => {
  console.log('mousedown-----', e)
}
const mousemove = (e) => {
  console.log('mousemove-----', e)
}
const mouseover = (e) => {
  console.log('mouseover-----', e)
}
const mouseout = (e) => {
  console.log('mouseout-----', e)
}
const globalout = (e) => {
  console.log('globalout-----', e)
}
const contextmenu = (e) => {
  console.log('contextmenu-----', e)
}



</script>

<style>
.chart-content{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.search-content{
  display: flex;
  justify-content: space-around;
  padding: 10px;
}
.search-form .el-input {
  --el-input-width: 380px;
}

.search-form .el-select {
  --el-select-width: 380px;
}
.search-form {
  display: flex;
  align-items: flex-star;
}
.chart{
  width: 80%;

  padding: 20px;
}
</style>